<template>
  <div class="ad-china-area-base">
    <el-cascader size="small" style="width: 100%" :placeholder="placeholder" :options="options" v-model="val" @change="onChange">
    </el-cascader>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from 'element-china-area-data'
export default {
  name: 'MdChinaAreaBaseComponent',
  props: {
    value: [Array],
    /**
     * 提示信息
     */
    placeholder: {
      type: String,
      default: '请选择省市区',
    },
  },
  data () {
    return {
      val: this.value,
      options: regionDataPlus,
    };
  },
  watch: {
    /**
     * 监听value值
     */
    value (nVal) {
      this.val = nVal
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.val = this.value;
    })
  },
  methods: {
    onChange (event) {
      let fullName = event.join('')
      let outPut = []

      if (fullName) {
        outPut.push(CodeToText[event[0]])
        outPut.push(CodeToText[event[1]])
        outPut.push(CodeToText[event[2]])
      }

      this.$emit('input', outPut)
      this.$emit('change', { texts: outPut, codes: event })
    },
  },
};
</script>